<template>
  <div class="course-share">
    <open-app 
    ref="openApp"
    :id="this.$route.params.id" 
    routerAddr="CourseScreen" 
    passprops="kid"/>
    <div
      class="background-course"
      :style="{ 'background': 'url(' + intro.coverUrl + ') no-repeat center center'}"
    />
    <section class="intro">
      <section class="intro-header">
        <h1 class="title">{{intro.title}}</h1>
        <h2 class="subtitle">{{intro.subTitle}}</h2>
        <em v-if="intro.freeForRole === '1'">拾恋达人免费</em>
      </section>
      <article class="intro-article">
        <h2 class="intro-text">课程简介</h2>
        <P class="intro-description">
          <pre class="intro-pre">
{{intro.description}}
          </pre>
        </P>
      </article>
      <section class="outline">
        <h2 class="outline-title">课程大纲</h2>
        <course-bar 
          v-for="(item, index) in list" 
          :data="item" 
          :index="index" 
           :ref="'courseBar'+index"
          :key="index"/>
      </section>
      <article class="buy-notice">
          <h2 class="notice-title">购买须知</h2>
          <p class="notice-content">
            <pre class="notice-text">{{intro.buyNotice}}</pre>
          </p>
      </article>
    </section>
    <footer class="footer">
      <div class="left" @click="listenTest">
        <span class="iconfont icon-shiting icon-operator"></span>
        <span class="audition-text">试听</span>
        <span class="cut-line"></span>
      </div>
      <div class="price">
        <span class="price-text">￥<em>{{intro.price / 100}}</em></span>
        <span class="seed-text">拾恋达人免费</span>
      </div>
      <div class="right" @click="openApp">立即购买</div>
    </footer>
  </div>
</template>


<script>
import CourseBar from "./components/course-bar";
import OpenApp from "./components/open-app";
export default {
  components: {
    CourseBar,
    OpenApp
  },
  data() {
    return {
      intro: {},
      list: []
    };
  },
  methods: {
    async getData() {
      // this.$route.params.id ||
      let kid = this.$route.params.id;
      let courseRes =  await this.$http.get("/lovelorn/v1.3/pb/courses", { params: { kid } });
      this.intro = courseRes.data.data;
      let listRes = await this.$http.get("/lovelorn/v1.3/pb/course-contents/action/list", {params: { courseKid: kid, pageSize: 100, pageNo: 1 }});
      let outline = {...this.intro, title: this.intro.outlineTitle, descriptionItem: "[]", playCount: this.intro.outLinePlayCount};
      this.list = [outline, ...listRes.data.data.entities]; 
    },
    openApp() {
      this.$refs.openApp.openApp();
    },
    listenTest() {
      this.$refs['courseBar0'][0].play();
    }
  },
  async created() {
    await this.getData();
    if (this.$utils.isWeiXin()) {
			this.$utils.wxShare({
				title: this.intro.title,
				desc: this.intro.description,
				link: `${window.location.origin}/course-share/${this.intro.kid}`,
				imgUrl: this.intro.coverUrl, 
			})
		}
  }
};
</script>

<style>
body {
  background: white;
}
.course-share {
  & .background-course {
    height: 5.3rem;
    background-size: cover !important;
  }
  & .intro {
    margin-top: -0.3rem;
    border-top-left-radius: 0.34rem;
    border-top-right-radius: 0.34rem;
    padding-top: .7rem;
    padding-bottom: 1rem;
    background-color: white;
    & .intro-header {
      padding: 0 .4rem;
      margin-bottom: 0.6rem;
      & > .title {
        font-size: 0.46rem;
        font-weight: bold;
      }
      & > .subtitle {
        font-size: 0.3rem;
        color: #999;
      }
    }
    & .intro-article {
      padding: 0 .4rem;
      margin-bottom: 0.6rem;
      & > .intro-text {
        font-size: 0.36rem;
        font-weight: bold;
        color: #010101;
      }
      & > .intro-description {
        word-break: break-all;
        font-size: 0.28rem;
        color: black;
        & >.intro-pre {
            white-space: pre-wrap;
            font-size: .28rem;
            line-height: .52rem;
            color: #000000;
        }
      }
    }
    & .outline {
      & .outline-title {
        padding: 0 .4rem;
        margin-bottom: 0.35rem;
        font-size: 0.36rem;
        font-weight: bold;
        color: #010101;
      }
    }

    & .buy-notice {
      & .notice-title {
        margin-bottom: 0.1rem;
        font-weight: bold;
        font-size: .36rem;
        color: #010101;
      }
      padding: 0 .3rem;
      & .notice-content {
         & .notice-text {
           white-space: pre-wrap;
           line-height: .52rem;
           font-size: .28rem;
           color: #000;
         }
      }
    }
  }
    & .footer {
		width: 100%;
		position:fixed;
		bottom: 0;
		z-index: 2;
	  display: flex;
	  height: .98rem;
	  background-color: white;
	  & > .left {
      display: flex;
      padding: .1rem 0;
      justify-content: center;
      align-items: center;
		  width: 1.97rem;
      color: #39b5fe;
      & .cut-line {
        display: block;
        width: 1px;
        height: 100%;
        margin-left: .35rem;
        background-color: #dbdbde;
      }
      & .icon-operator {
        font-size: .32rem;
        margin-right: .12rem;
      }
      & .audition-text {
        	font-size: .32rem;
          color: #39b5fe;
      }
	  }
	  & >.price {
		  flex: 1;
      display: flex;
      justify-content: center;
		  align-items: center;
		  color:#ff3988;
		  & >.price-text {
			  font-size: .33rem;
			  & > em {
				
				  font-size: .48rem;
			  }
		  }
		  & > .seed-text {
				margin-left: .15rem;
				margin-top: .15rem;
			  	font-size: .22rem;
				color: #999999;
		  }
	  }
	  & >.right {
		width: 2.34rem;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: .34rem;
		color: white;
		background-color: #ff3988;
		box-shadow: 0px 0px 29px 0px 
			rgba(111, 81, 165, 0.19);
	  }
  }
}
</style>
